import React,{memo,useEffect,useState} from 'react'
import { Swiper, SwiperSlide} from 'swiper/react';
// import Swiper from 'swiper';
import 'swiper/css';
import {forceCheck} from 'react-lazyload';
import {SwiperItem} from './style'
import Scroll from '../../baseUI/scroll'
import SearchInput from '../../components/searchInput/SearchInput'
import Classify from '../../components/classify/Classify'
import styled from 'styled-components';
import ListItem from '../../common/ListItem/index'
import MainPopup from '../../components/mainpopup/MainPopup'
import * as api from '../../api/index'

// scroll 内外 都需要一个固定的框架 ，来把他给框到
const Content = styled.div`
    width: 100vw;
    height: 83vh;
`
const Curtain= styled.div`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color:rgba(0,0,0,0.1);
    z-index: 9;
`
export default function Home() {
    const [num,setNum]=useState(0);
    const [classify,setclassify]=useState([
        {id:0,val:'推荐'},
        {id:1,val:'热榜'},
        {id:2,val:'游戏'},
        {id:3,val:'篮球'},
        {id:4,val:'步行街'},
        {id:5,val:'足球'},
        {id:6,val:'视频'},
        {id:7,val:'数码'},
        {id:8,val:'影视娱乐'},
        {id:9,val:'装备'},
        {id:10,val:'骑车'}
    ]);
    let [page,setPage] = useState(1)
    let [list,setList] = useState([]);
    const [curtain,setCurtain] = useState(0)
    const fetchList= () =>{
        api
            .remain(page)
            .then(res =>{
                setList([
                    ...list,
                    ...res.data.data.list
                ])
            })    
    }
    // const 
    
    useEffect(() => {
          fetchList()
    }, [])
    useEffect(() => {
       console.log(curtain,'--------------');
  }, [curtain])
    const slideChange= (event) =>{
        setNum(num => num=event.activeIndex)
    }
    const graying = (num) =>{
      
            setCurtain(0)
    }

    return (
        <>
            <SearchInput/>
            <Classify classify={classify} num={num} setNum={setNum}/>
            <SwiperItem>
            <Swiper
               onSlideChange={slideChange}
            >
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    {
                        classify.map((item,index)=>{
                            return (
                                <SwiperSlide  key={index} >
                                    <Content >
                                        <Scroll
                                            direction={"vertical"}
                                            refresh={false}
                                            onScroll={forceCheck}
                                            >
                                                <div >
                                                    <ListItem list={list} setCurtain={setCurtain} curtain={curtain}/>
                                                </div>
                                        </Scroll>
                                    </Content>
                                   
                                </SwiperSlide>
                            )
                        })
                    }
                    </div>
                </div>
            </Swiper>
            </SwiperItem>
            <Curtain style={curtain== 0?{display:'none'}:{display:'block'}} onClick={graying}/>
        </>
    )
}

